<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js" type="text/javascript"></script>
    <style>
        .bu>button{
            width:50px;
            height: 20px;
            float: left;
        }
        .active{
            border: 1px solid red;
        }
        #app,#app1,#app2{
            border:1px solid gray;
            height:auto;
            width: auto;
        }
    </style>
</head>
<body>
    <div id="app">
        {{message}}
        <div class="bu">
            <button @click="minus">-</button>
            <button>{{count}}</button>
            <button @click="add">+</button>
        </div>
    </div>
    <br/>
    <br/>
    <div id="app1">
        <button @click="changeShow">点击切换v-show v-if</button>
        <p v-if="isShow">程序员</p>      
        <div v-show="isShow">{{show_content}}</div>
        <button @click="toggleActive">点击显示图片active</button>
        <img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" alt=""/>
        <img :src="imgSrc" :title="imgTitle+'xixi'" :class="{active:isActive}" alt="">
    </div>
    <div id="app2">
        <img :src="imgList[index]" alt="" style="width:350px;height:200px;">
        <div :style="astyle">
            <div id="pre" @click="pre"> < </div>
            
            <p>{{index}}</p>
            
            <div id="next" @click="next"> > </div>
        </div>
        <div>
            <input type="button" value="点击" @click="doIt(666,'老铁')"/>
            <input type="text" @keyup.enter="sayHi"/>
            <input type="text" v-model="message_md"/>
            <h2>{{message_md}}</h2>
        </div>
    </div>
    <br/>
    <div id="app3">
        <input type="text" v-model="test" @keyup.enter="noteadd(test)"/>
        <ul>
            <li v-for="(item,index) in noteList">
                {{index+1}} &nbsp;&nbsp;{{item.content}}&nbsp;&nbsp;<span @click="notedelete(index)">x</span>
            </li>
            <li v-show = "noteList.length!=0">
                <span>总共{{noteList.length}}条数据</span>
                <span @click="clear">clear</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // Vue.config.productionTip = false;
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!",
                count:0
            },
            methods:{
                minus:function(){
                    this.count--
                },
                add:function(){
                    if(this.count>=2)
                        this.count=0
                    else
                        this.count++
                }
            }
        })
        var app1 = new Vue({
            el:"#app1",
            data:{
                isShow:"false",
                show_content:"看得见我不",
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"haha",
                isActive:false
            },
            methods:{
                changeShow:function(){
                    this.isShow = !this.isShow
                },
                toggleActive:function(){
                    this.isActive = !this.isActive
                }
            }
        })
        var app2 = new Vue({
            el:"#app2",
            data:{
                imgList:[
                    "./img/doudou.jpg",
                    "./img/img1.jpg",
                    "./img/maliao.jpg"
                ],
                index:0,
                astyle:"width:100px;height:50px;display:inline-block;",
                message_md:""
            },
            methods:{
                pre:function(){
                    if(this.index<=0)
                        this.index=2
                    else
                        this.index--
                },
                next:function(){
                    if(this.index>=2)
                        this.index=0
                    else
                        this.index++
                },
                sayHi:function(){
                    alert("吃了没")
                },                
                doIt:function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                }
            }
        })
        var app3 = new Vue({
            el:"#app3",
            data:{
                noteList:[
                    {
                        id:1,
                        content:"吃饭饭"
                    },
                    {
                        id:2,
                        content:"睡觉觉"
                    },
                    {
                        id:3,
                        content:"写代码"
                    }
                ],
                test:""
            },
            methods:{
                noteadd:function(p1){                  
                    if(p1!=null){
                        var a = {id:this.noteList.length+1,content:p1}
                        console.log(p1,a)
                        this.noteList.push(a)
                    }
                    else
                        alert("不能为空！")
                },
                notedelete:function(noteindex){
                    console.log(noteindex);
                    this.noteList.splice(noteindex,1);
                },
                clear:function(){
                    this.noteList = []
                }
            }
        })
    </script>
    
</body>
</html>